<!--
* @author wn
* @date 2022/10/09 15:05:14
* @description: 主页面
!-->
<template>
	<!-- el-row  el-col -->
	<el-row :gutter="20">
		<!-- 左侧 -->
		<el-col :span="8">
			<!-- 头像 用户信息 -->
			<el-card shadow="hover">
				<!-- card header 具名插槽 -->
				<!-- card body 默认插槽-->
				<div class="user">
					<el-avatar :src="userAvatar" :size="150" />
					<div class="user-info">
						<p>Admin</p>
						<p>超级管理员</p>
					</div>
				</div>
				<div class="login-info">
					<p>上次登陆时间: <span>2022-01-01</span></p>
					<p>上次登陆地点: <span>烟台</span></p>
				</div>
			</el-card>
			<!-- 数据表格 -->
			<el-card shadow="hover" style="margin-top: 20px">
				<el-table
					:data="homeTableDataList"
					stripe
					style="width: 100%"
					height="450"
				>
					<el-table-column
						v-for="(v, k) in homeTable"
						:key="k"
						:prop="k"
						:label="v"
						align="center"
					/>
				</el-table>
			</el-card>
		</el-col>
		<!-- 右侧 -->
		<el-col :span="16">
			<!-- 订单数量 -->
			<order-number />
			<!-- echarts 折线图 -->
			<home-echarts />
		</el-col>
	</el-row>
</template>
<script setup>
import userAvatar from '@/assets/images/user.jpg'
import { getHomeTableData, homeTable } from '@/network/home'
import { ref } from 'vue'
import OrderNumber from './components/OrderNumber'
import HomeEcharts from './components/HomeEcharts'
// import { useStore } from 'vuex'

// mock 获取 主页 Table 数据
const homeTableDataList = ref(null)
getHomeTableData().then(({ result }) => (homeTableDataList.value = result))

// 面包屑 首次进入  breadcrumb 数据清空  刷新 不清空
// 首次进入  0  路由进入也是 0
// 刷新后    1  路由进入也是 1
// 单纯为了 面包屑
// const store = useStore()
// store.commit('common2/setBreadcrumb', null)
</script>
<style scoped lang="scss">
.user {
	display: flex;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 1px solid #ccc;
	.el-avatar {
		margin-right: 40px;
	}
	p {
		line-height: 1.6;
		font-weight: 700;
	}
}
.login-info {
	margin-top: 20px;
	p {
		line-height: 30px;
		color: #999;
		span {
			color: #666;
			margin-left: 60px;
		}
	}
}
// 设置高度 后 底部出现 一条线  需要 穿透
:deep(.el-table__inner-wrapper::before) {
	height: 0px;
}
// el-button hover 和 active 颜色
/*
.el-button:focus,
.el-button:hover {
	background: rgb(230, 162, 60);
	border-color: rgb(230, 162, 60);
	color: #fff;
}
.el-button.is-active,
.el-button:active {
	background: rgb(230, 162, 60);
	border-color: rgb(230, 162, 60);
	color: #fff;
}
*/
</style>
